<template>
	<view class="order_details">
		<!--  -->
		<view class="address">
			<view class="name">张梦楠  13289765632</view>
			<view class="text">
				<image src="@/static/images/left_icon1.png" mode=""></image>
				<text>河南省郑州市金水区经八路街道红旗路73号我们的家属院河南省郑州市金水区经八路街道红旗路73号我们的家属院</text>
			</view>
		</view>
		<!--  -->
		<view class="main">
			<view class="title">商品信息</view>
			<view class="goods_info">
				<view class="image">
					<image src="@/static/logo.png" mode="aspectFill"></image>
					<text class="txt1">进货</text>
					<!-- <text class="txt2">仓储</text> -->
				</view>
				<view class="info">
					<view class="name one-txt-cut">大容量男女士滋润美肌奶香沐浴乳</view>
					<view class="sku">
						<text>规格：件</text>
					</view>
					<view class="money1">
						<view class="left">
							<text>￥128.00</text>
						</view>
						<view class="right">x1</view>
					</view>
				</view>
			</view>
			<view class="main_text">
				<view class="info">
					<view class="left">商品总额</view>
					<view class="right">
						￥998.00
					</view>
				</view>
				<view class="info">
					<view class="left">实际支付</view>
					<view class="right">
						￥998.00
					</view>
				</view>
			</view>
			<!-- 零售 -->
			<view class="main_text" v-if="false">
				<view class="info">
					<view class="left">商品总额</view>
					<view class="right">￥998.00</view>
				</view>
				<view class="info">
					<view class="left">实际支付</view>
					<view class="right">￥998.00</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="main_info">
			<view class="info" style="height: 150rpx;align-items: flex-start;">
				<view class="left">付款凭证</view>
				<view class="image">
					<image src="@/static/images/wo_background.jpg" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right">34878375834750843</view>
			</view>
			<view class="info">
				<view class="left">合计</view>
				<view class="right" >￥128.00</view>
			</view>
			<view class="info">
				<view class="left">拒绝原因</view>
				<view class="right">总管理定时执行过期订单返还库存</view>
			</view>
			<view class="info_time">
				<view class="line">
					<text></text>
				</view>
				<view class="time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>创建时间</text>
					</view>
					<view class="right">2023/03-28 16:27:01</view>
				</view>
				<view class="time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>抢购时间</text>
					</view>
					<view class="right">2023/03-28 16:27:01</view>
				</view>
				<view class="time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>提交支付凭证时间</text>
					</view>
					<view class="right">2023/03-28 16:27:01</view>
				</view>
				<view class="time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>拒绝时间</text>
					</view>
					<view class="right">2023/03-28 16:27:01</view>
				</view>
				<view class="time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>审核通过时间</text>
					</view>
					<view class="right">2023/03-28 16:27:01</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="details_btn" :style="[botStyle]">
			<text class="btn1">审核拒绝</text>
			<text class="btn2">审核通过</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomHeight:0,
			};
		},
		computed:{
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'108rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
		},
	}
</script>

<style lang="less">
	.order_details{
		width: 100%;
		.details_top{
			width: 100%;
			height: 128rpx;
			padding: 0 32rpx;
			background: #26C281;
			display: flex;
			align-items: center;
			image{
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
			.txt{
				padding-left: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.tip{
				padding-left: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.address{
			width: 100%;
			padding: 32rpx;
			background: #fff;
			.name{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.text{
				padding-top: 15rpx;
				display: flex;
				align-items: center;
				image{
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
				text{
					width: calc(100% - 24rpx);
					padding-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.main{
			margin-top: 24rpx;
			width: 100%;
			padding: 25rpx 32rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.goods_info{
				width: 100%;
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-top: 1rpx solid #F3F3F3;
				border-bottom: 1rpx solid #F3F3F3;
				display: flex;
				.image{
					position: relative;
					width: 168rpx;
					height: 168rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					text{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						display: block;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 10rpx 0 10rpx 0;
					}
					.txt1{
						background: #FFA551;
					}
					.txt2{
						background: #26C281;
					}
					.txt3{
						background: #148EFF;
					}
				}
				.info{
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.sku{
						width: 100%;
						padding: 10rpx 0;
						display: flex;
						text{
							display: block;
							padding: 0 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #F7F7F7;
							border-radius: 5rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num_a{
						width: 100%;
						display: flex;
						align-items: center;
						text{
							padding-right: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
					}
					.money1{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 40rpx;
								height: 40rpx;
							}
							text{
								padding-left: 5rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
							}
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.tip_txt{
				width: 100%;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.txt{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
					text{
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
					.color1{
						background: #FF815A;
					}
					.color2{
						background: #43A5FF;
					}
					.color3{
						background: #51CE9A;
					}
				}
			}
			.main_text{
				width: 100%;
				margin-top: 8px;
				.info{
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.main_info{
			width: 100%;
			margin: 24rpx 0;
			padding: 20rpx 32rpx;
			background: #fff;
			.info{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.image{
					width: 148rpx;
					height: 148rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
			.info_time{
				position: relative;
				width: 100%;
				margin-top: 24rpx;
				.line{
					position: absolute;
					top: 0;
					left: 10rpx;
					z-index: 1;
					width: 4rpx;
					height: 100%;
					padding: 30rpx 0;
					text{
						display: block;
						width: 100%;
						height: 100%;
						background: #D4D7DD;
					}
				}
				.time{
					position: relative;
					z-index: 2;
					width: 100%;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 24rpx;
							height: 24rpx;
						}
						text{
							padding-left: 12rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
						}
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
		.details_btn{
			position: fixed;
			bottom: 0;
			z-index: 100;
			width: 100%;
			background: #fff;
			padding-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: flex-end;
			text{
				margin-left: 12rpx;
				display: block;
				padding: 0 20rpx;
				height: 68rpx;
				line-height: 64rpx;
				border-radius: 34rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}
			.btn1{
				color: #999;
				border: 2rpx solid #EBEBEB;
			}
			.btn2{
				color: #26C281;
				border: 2rpx solid #26C281;
			}
		}
	}
</style>
